import React, { useCallback } from 'react'
import { BuyWrapper } from './styledBuy'
import Search from '@/components/search/Search'
import TopBar from '@/components/topbar/Topbar'
import ShowList from '@/components/showList/ShowList'
import Recommend from './Recommend'
import Shoes from './Shoes'
import Clothes from './Clothes'
import all from '@/assets/images/all.png'
import { useHistory } from 'react-router-dom'
import Navbar from '@/components/Navbar/Navbar'

export default function BuyUi(props) {
    // console.log(props);

    const history=useHistory()

    const handleSearchClick = useCallback(
        () => {
           history.push('/search')
        }

    )
    // const handleClick=useCallback(
    //     ()=>{
    //         history.push('/all')
    //     }
    // )

    const handleClick=(item)=>{
        history.push('/all')
    }
    
    return (
        <>
        <Navbar
        title='得物App'
        color='#F8F8F8'
        onClick={handleClick}
    >
    </Navbar>
        <BuyWrapper>
           
            <div className='top'>
                <Search
                    borderColor="#eee"
                    borderRadius={10}
                    outerBg='white'
                    innerBg='#F5F5F9'
                    searchClick={handleSearchClick}
                    title='搜索单品'
                >
                    <span className='all'
                        onClick={handleClick}
                    >
                        <img src={all} alt="" width="35" height="35" />
                    </span>
                </Search>

                <TopBar {...props}>
                    <TopBar.Item >
                        <Recommend list={props.obj.list}></Recommend>
                    </TopBar.Item>

                    <TopBar.Item>
                        <Shoes shoes={props.obj.shoes}></Shoes>
                    </TopBar.Item>

                    <TopBar.Item>
                        <Clothes clothes={props.obj.clothes}></Clothes>
                    </TopBar.Item>

                    <TopBar.Item>
                        <Recommend list={props.obj.list}></Recommend>
                    </TopBar.Item>

                    <TopBar.Item>
                        <Recommend list={props.obj.list}></Recommend>
                    </TopBar.Item>

                    <TopBar.Item>
                        <Recommend list={props.obj.list}></Recommend>
                    </TopBar.Item>
                </TopBar>

            </div>

            {/* <Topbar.Item
                title="推荐"
                ></Topbar.Item>

                <Topbar.Item
                title="鞋类"
                ></Topbar.Item>   

                <Topbar.Item
                title="潮服"
                ></Topbar.Item>   

                <Topbar.Item
                title="手表"
                ></Topbar.Item>

                <Topbar.Item
                title="箱包"
                ></Topbar.Item>

                <Topbar.Item
                title="配饰"
                ></Topbar.Item>

                <Topbar.Item
                title="潮玩"
                ></Topbar.Item>

                <Topbar.Item
                title="运动"
                ></Topbar.Item>

                <Topbar.Item
                title="数码"
                ></Topbar.Item>
                
                <Topbar.Item
                title="美妆"
                ></Topbar.Item>

                <Topbar.Item
                title="女装"
                ></Topbar.Item> */}

        </BuyWrapper>
        </>
    )
}
